Clear floating

Make sure the element clears its child elements. This is useful only if you are still using floats to build your layout. Consider using a modern approach with a flexible box layout or grid layout.

HTML CODE

<div class="clearfix">
    <div class="floated">
        float a
    </div>
    <div class="floated">float b</div>
</div>

CSS CODE:

.clearfix::after {
    content: '';
    display: block;
    clear: both;
} 
.floated {
    float: left;
}

DEMOSTRATION: